<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="对接设置">
        <Row>
            <BoxCell title="理货单号">{{data.code}}</BoxCell>
            <BoxCell title="入库单号">{{data.warehousing.code}}</BoxCell>
            <BoxCell title="产品代码">{{data.product.code}}</BoxCell>
            <BoxCell title="产品名称">{{data.product.title}}</BoxCell>
            <BoxCell title="来货条码">{{data.barcode}}</BoxCell>
            <BoxCell title="预期来货">{{data.quantity}}</BoxCell>
            <BoxCell title="已收数量" v-if="data.status === 1">{{sendQuantity}}</BoxCell>
            <BoxCell title="实收数量" v-if="data.status === 2">{{data.send}}</BoxCell>
            <BoxCell title="状态">
                <span v-if="data.status === 0">待理货</span>
                <span v-if="data.status === 1">理货中</span>
                <span v-if="data.status === 2">理货完成</span>
            </BoxCell>
        </Row>
        <Tabs value="name1">
            <TabPane label="理货明细" name="name1">
                <TabDetail v-model="data.details" :tally="data.id" @refresh="getData"></TabDetail>
            </TabPane>
            <TabPane label="日志" name="logs1">
                <Logs v-model="data.logs"></Logs>
            </TabPane>
        </Tabs>
        <div slot="footer">
            <Button @click="openComponent('IDetail', data)" v-if="data.status === 1">添加明细</Button>
            <Button type="primary" @click="submitForComplete()" v-if="data.status === 1">理货完成</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props" @input="getData"></component>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import BoxCell from "../../../components/content/boxCell";
    import IDetail from './detail'
    import TabDetail from "./tabDetail";
    import Logs from "../../../components/content/logs";

    export default {
        name: "iiview",
        mixins: [contentDrawer],
        components: {Logs, TabDetail, BoxCell, RemoteSelect, IForm, IDrawer, IDetail},
        data() {
            return {
                data: {warehousing: {}, product: {}, details: [], logs: []},
            }
        },
        mounted() {
            this.getData();
        },
        computed: {
            sendQuantity() {
                let quantity = 0;
                this.data.details.forEach((item) => {
                    quantity += item.quantity;
                });
                return quantity;
            }
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`warehousing/tally/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForComplete() {
                this.$http.get(`warehousing/tally/${this.props.id}`).then((res) => {
                    this.data = res;
                    this.$Modal.confirm({
                        title: '确认要完成收货吗？？',
                        content: `预期来货:${this.data.quantity}; 实收: ${this.sendQuantity};`,
                        onOk: () => {
                            this.loading = true;
                            this.$http.put(`warehousing/tally/${this.props.id}/complete`).then(() => {
                                this.getData();
                            }).finally(() => {
                                this.loading = false;
                            });
                        }
                    })
                });

            }
        }
    }
</script>

<style scoped>

</style>
